<template>
  <h1>1.组件的基本写法</h1>
  <h1>{{person.name}}---{{person.age}}---{{person.sex}}--{{person.score}}--{{person.hobby}}</h1>
  <button @click="changePerson">点击</button>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "About",
})
</script>



<script lang="ts" setup>
/* 
  reactive创建一个对象类型值的响应式数据：
    - reactive返回一个代理对象，这个代理对象就是响应式的
    - 我们在模板和setup中可以直接使用这个代理对象进行增删改操作
    
*/

interface PersonType {
  name?: string;
  age?: number;
  sex?: string;
  score?: number;
  hobby?: string[];
}

import {reactive} from "vue"
const person = reactive<PersonType>({
  name: "laoliu",
  age: 18,
  sex: "男",
  hobby: ["1" , "2"]
})
 
console.log(person);

const changePerson = () => {
  //改
  // person.name = "xiaoli";
  //增
  // person.score = 100;
  //删
  // delete person.age;

  //深层次也可以响应式,数组的直接操作也是可以响应式的
  (person.hobby as string[])[0] = "666"
  // (person.hobby as string[])[0] = "rap";
};

</script>

<style scoped>
</style>